<template>
  <div id="background" >
    <div id="logo">
    奇瑞集团IT部门
   </div>
    
    <div id="login">
      <el-card class="box-card">
        <div id="form">
          <el-input v-model="username" placeholder="请输入内容"></el-input>
          <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
          <el-button type="primary"  v-on:click="login">登陆</el-button>
        </div>
      </el-card>
   </div>

    <div id="clock">
    <div id="time">{{time}}</div>
    <div id="date">{{date}}</div>
    </div>

    <div id="copyright">
      Copyright ©️ 2022 cch. All Rights Reserved
    </div>
  </div>

</template>

<style scoped>
#background {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-image: linear-gradient( 
      90deg, cyan, purple 
      );
    background-size: 400%;
    
    animation: myanimation 10s infinite;
}
@keyframes myanimation {
  0%{
    background-position: 0%,50%;
  }
  50%{
    background-position: 100%,50%;
  }
  100%{
    background-position: 0%,50%;
  }
}
#logo{
  color: aliceblue;
  font-size: 25px;
  font-weight: 800;
  text-transform: uppercase;/*大写*/
  position: absolute;
  top: 15%;
  left:15%;
}
#login{
  position: absolute;
  top:30%;
  left: 38%;
}
.el-card {
  width:373px;
  height: 210px;
  background-color: rgba(255, 255, 255, 0.4);/*透明 */
  border-radius: 15px;/**设置圆角 */
}
#form{
  line-height: 60px;/**行间距 */
  padding-left: 15px;/**左间距 */
  padding-right: 15px;/**右间距 */
}
#clock{
  color: aliceblue;
  position: absolute;
  top: 70%;
  left: 15%;
  text-align: left;/** 文本左对齐*/
}
#time{
  font-size: 100px;
}
#date{
  font-size: 35px;
}
#copyright{
  color: aliceblue;
  position: absolute; 
  top: 95%;
  left: 38%;

}
</style>

<script>
import router from '@/router'
export default {
  data(){
    return{
      username:"",
      password:"",
      time:"",
      date:"", 
    }
  },
  /**钩子函数，每秒触发一次 */
  mounted(){
    this.$nextTick(()=>{
      setInterval(this.update_clock,1000)
    })
  },
  methods:{
    update_clock:function(e){
      var d=new Date();
      var year=d.getFullYear();
      if(year<10){
        year="0"+year
      }
      var mon=d.getMonth();
      if(mon<10){
       mon ="0"+mon
      }
      var day=d.getDate();
      if(day<10){
       day ="0"+day
      }
      var hour=d.getHours();
      if(hour<10){
       hour ="0"+hour
      }
      var minute=d.getMinutes();
      if(minute<10){
        minute="0"+minute
      }
      this.time=hour+":"+minute;
      this.date=year+"/"+mon+"/"+day;
    },
    login:function(e){
      
      this.$axios({
          url: "/admin/login",
          method: "post",
          data: {
            username: this.username,
            password: this.password,
          },
        })
          .then((res) => {
            if(res.data.flag==true){
              router.push('./adminhome')
            }
          })
          .catch((err) => {
            console.log(err);
          });
    }
  }
}
</script>